<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>my cards</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/modern-v2.css" rel="stylesheet">
</head>
<body>
    <div class="page-header">
    <div class="container">
        <h2><i class="fas fa-tasks"></i> 我的清单人生</h2>
        <p class="text-muted">管理您的任务和目标，提高工作效率</p>
    </div>
</div>
    <!-- 简化分隔符 -->
    <div class="spacer-20"></div>
    <div class="container">
        <!-- 简化内部分隔符 -->
        <div class="spacer-10"></div>
        <!-- 添加新卡片区域 - 始终保持在顶部 -->
        <div class="row">
            <div class="col-xs-12">
                <div class="card-panel shadow-sm">
                    <h4 class="card-title"><i class="fas fa-plus-circle"></i> 添加新卡片</h4>
                    <form id="add-card-form" action="/cards/add_new_card" method="POST">
                        <div class="row">
                            <div class="form-group col-sm-6 col-md-3">
                                <label for="category-select"><i class="fas fa-folder"></i> 分类</label>
                                <select id="category-select" name="category" class="form-control">
                                    {% if category_now.id == 2 %}
                                    <option value="" selected disabled>选择分类</option>
                                    {% else %}
                                    <option value="{{ category_now.id }}" selected>{{ category_now.name }}</option>
                                    {% endif %}
                                    {% for category in categories %}
                                        {% if category != category_now and category.id != 2 %}
                                        <option value="{{ category.id }}">{{ category.name }}</option>
                                        {% endif %}
                                    {% endfor%}
                                </select>
                            </div>

                            <div class="form-group col-sm-6 col-md-3">
                                <label for="card_headline"><i class="fas fa-heading"></i> 标题</label>
                                <input class="form-control" id="card_headline" type="text" name="card_headline" placeholder="想要做些什么呢">
                            </div>

                            <div class="form-group col-sm-6 col-md-2">
                                <label for="card_date"><i class="far fa-calendar-alt"></i> 截止日期</label>
                                <input class="form-control" id="card_date" type="text" name="card_date" placeholder="输入截止日期">
                            </div>

                            <div class="form-group col-sm-6 col-md-2">
                                <label for="type-select"><i class="fas fa-flag"></i> 优先级</label>
                                <select id="type-select" name="card_type" class="form-control">
                                    <option value="1">重要紧急</option>
                                    <option value="2">重要不紧急</option>
                                    <option value="3" selected>紧急不重要</option>
                                    <option value="4">不重要不紧急</option>
                                </select>
                            </div>

                            <div class="form-group col-sm-12 col-md-2">
                                <label class="d-block">&nbsp;</label>
                                <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-plus"></i> 添加</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="section-divider"></div>
        
        <!-- 三栏布局区域 -->
        <div class="row">
            <!-- 左侧边栏 - 优先级分类和时间分类 -->
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <!-- 优先级分类 -->
                <div class="card-panel shadow-sm">
                    <h4><i class="fas fa-flag"></i> 优先级分类</h4>
                    <div class="custom-categories">
                        {% for category in categories[2:] if category.name in ["重要紧急","重要不紧急","紧急不重要","不重要不紧急","已开始清单"] %}
                        <div class="custom-category-item {% if category == category_now %}active{% endif %}
                            {% if category.name == "重要紧急" %}priority-item{% endif %}
                            {% if category.name == "重要不紧急" %}important-item{% endif %}
                            {% if category.name == "紧急不重要" %}secondary-item{% endif %}
                            {% if category.name == "不重要不紧急" %}low-item{% endif %}
                            {% if category.name == "已开始清单" %}progress-item{% endif %}">
                            <a href="/cards/category/{{category.id}}" class="category-link">
                                {% if category.name == "重要紧急" %}
                                    <i class="fas fa-exclamation-circle"></i>
                                {% elif category.name == "重要不紧急" %}
                                    <i class="fas fa-exclamation"></i>
                                {% elif category.name == "紧急不重要" %}
                                    <i class="fas fa-bolt"></i>
                                {% elif category.name == "不重要不紧急" %}
                                    <i class="fas fa-check"></i>
                                {% elif category.name == "已开始清单" %}
                                    <i class="fas fa-play-circle"></i>
                                {% endif %}
                                {{ category.name }}
                                <span class="category-count">{% if category.name in types_cards %}{{ types_cards[category.name]|length }}{% else %}0{% endif %}</span>
                            </a>
                            <a href="/cards/delete_category/{{category.id}}" class="delete-category" title="删除分类">
                                <i class="fas fa-times-circle"></i>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <!-- 时间分类 -->
                <div class="card-panel shadow-sm mt-3">
                    <h4><i class="fas fa-calendar"></i> 时间分类</h4>
                    <div class="custom-categories">
                        {% for category in categories[2:] if category.name in ["日清单","周清单","月清单","年清单","十年清单"] %}
                        <div class="custom-category-item time-item {% if category == category_now %}active{% endif %}">
                            <a href="/cards/category/{{category.id}}" class="category-link">
                                {% if category.name == "日清单" %}
                                    <i class="fas fa-sun"></i>
                                {% elif category.name == "周清单" %}
                                    <i class="fas fa-calendar-week"></i>
                                {% elif category.name == "月清单" %}
                                    <i class="fas fa-calendar-alt"></i>
                                {% elif category.name == "年清单" %}
                                    <i class="fas fa-calendar-check"></i>
                                {% elif category.name == "十年清单" %}
                                    <i class="fas fa-hourglass-half"></i>
                                {% endif %}
                                {{ category.name }}
                                <span class="category-count">{% if category.name in times_cards %}{{ times_cards[category.name]|length }}{% else %}0{% endif %}</span>
                            </a>
                            <a href="/cards/delete_category/{{category.id}}" class="delete-category" title="删除分类">
                                <i class="fas fa-times-circle"></i>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <!-- 已完成清单 -->
                <div class="card-panel shadow-sm mt-3">
                    <h4><i class="fas fa-check-double"></i>
已完成</h4>
                    <div class="custom-categories">
                        {% for category in categories[2:] if category.id == 2 %}
                        <div class="custom-category-item completed-item {% if category == category_now %}active{% endif %}">
                            <a href="/cards/category/{{category.id}}" class="category-link">
                                <i class="fas fa-check-circle"></i> 已完成清单
                                <span class="category-count">{{ category.cards.count() }}</span>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- 中间卡片内容区 -->
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="card-panel shadow-sm">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4><i class="fas fa-list"></i> {{ category_now.name }} <span class="badge badge-primary">{{ items|length }}</span></h4>
                        <div class="card-stats">
                            <div class="progress-container">
                                <div class="progress">
                                    {% set completed = 0 %}
                                    {% set in_progress = 0 %}
                                    {% for item in items %}
                                        {% if item.begintime and not item.endtime %}
                                            {% set in_progress = in_progress + 1 %}
                                        {% endif %}
                                    {% endfor %}
                                    {% set completed_percent = (in_progress / items|length * 100) if items|length > 0 else 0 %}
                                    <div class="progress-bar" role="progressbar" style="width: {{ completed_percent }}%" 
                                        aria-valuenow="{{ completed_percent }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ in_progress }}/{{ items|length }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if category_now.id == 2 %}
                        <div class="completed-tasks">
                            {% for item in items %}
                            <div class="card-list-item completed-item">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-8">
                                        <h5 class="card-title completed"><del>{{ item.headline }}</del></h5>
                                        <div class="card-meta">
                                            <span><i class="fas fa-check-circle"></i> 完成于: {{item.donetime }}</span>
                                            <span><i class="fas fa-clock"></i> 耗时: {{ 0 or item.usedtime//60 }} 分钟</span>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 text-right card-actions">
                                        <a href="/cards/delete_item/{{item.id}}" class="action-link danger" title="删除任务">
                                            <i class="fas fa-trash"></i> 删除
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="card-list">
                            {% for item in items %}
                            <div class="card-list-item priority-{{ item.type }}">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-4">
                                        <h5 class="card-title">{{item.headline }}</h5>
                                        <div class="card-meta">
                                            <span><i class="far fa-calendar-alt"></i> 截止: {{item.updatetime }}</span>
                                            {% if item.begintime %}
                                                <span><i class="fas fa-hourglass-start"></i> 开始: {{item.begintime }}</span>
                                            {% endif %}
                                            {% if item.endtime %}
                                                <span><i class="fas fa-hourglass-end"></i> 结束: {{item.endtime }}</span>
                                            {% endif %}
                                            <span><i class="fas fa-clock"></i> 用时: {{ 0 or item.usedtime//60 }} 分钟</span>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4">
                                        <div class="card-status">
                                            {% if not item.begintime and not item.endtime %}
                                                <span class="status-badge status-not-started"><i class="fas fa-circle"></i> 未开始</span>
                                            {% elif item.begintime and not item.endtime %}
                                                <span class="status-badge status-in-progress"><i class="fas fa-spinner fa-spin"></i> 进行中</span>
                                            {% elif not item.begintime and item.endtime %}
                                                <span class="status-badge status-completed"><i class="fas fa-check-circle"></i> 已结束</span>
                                            {% endif %}

                                            <div class="priority-indicator">
                                                {% if item.type == 1 %}
                                                    <span class="priority-badge priority-urgent"><i class="fas fa-exclamation-circle"></i> 重要紧急</span>
                                                {% elif item.type == 2 %}
                                                    <span class="priority-badge priority-important"><i class="fas fa-exclamation"></i> 重要不紧急</span>
                                                {% elif item.type == 3 %}
                                                    <span class="priority-badge priority-secondary"><i class="fas fa-bolt"></i> 紧急不重要</span>
                                                {% elif item.type == 4 %}
                                                    <span class="priority-badge priority-low"><i class="fas fa-check"></i> 不重要不紧急</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-4 text-right card-actions">
                                        {% if not item.begintime %}
                                            <a href="/cards/begin_card/{{item.id}}" class="action-link success" title="开始任务">
                                                <i class="fas fa-play-circle"></i> 开始
                                            </a>
                                        {% endif %}
                                        
                                        {% if item.begintime and not item.endtime %}
                                            <a href="/cards/end_card/{{item.id}}" class="action-link" title="结束任务">
                                                <i class="fas fa-stop-circle"></i> 结束
                                            </a>
                                        {% endif %}
                                        
                                        <a href="/cards/edit_card/{{item.id}}" class="action-link" title="编辑任务">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        
                                        <a href="/cards/done/{{item.id}}" class="action-link success" title="标记为完成">
                                            <i class="fas fa-check-square"></i> 完成
                                        </a>
                                        
                                        <a href="/cards/delete_item/{{item.id}}" class="action-link danger" title="删除任务">
                                            <i class="fas fa-trash"></i> 删除
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </p>
                </div>
            </div>
            
            <!-- 右侧边栏 - 自定义分类 -->
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <div class="card-panel shadow-sm custom-category-section">
                    <h4><i class="fas fa-folder-plus"></i> 自定义分类</h4>
                    <div class="custom-categories">
                        {% for category in categories[2:] if category.name not in ["日清单","周清单","月清单","年清单","十年清单","重要紧急","重要不紧急","紧急不重要","不重要不紧急","已开始清单"] and category.id != 2 %}
                        <div class="custom-category-item {% if category == category_now %}active{% endif %}">
                            <a href="/cards/category/{{category.id}}" class="category-link">
                                <i class="fas fa-tag"></i> {{ category.name }}
                                <span class="category-count">{{ category.cards.count() }}</span>
                            </a>
                            <a href="/cards/delete_category/{{category.id}}" class="delete-category" title="删除分类">
                                <i class="fas fa-times-circle"></i>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <!-- 添加分类表单 -->
                    <div class="add-category-form mt-3">
                        <form id="add-category-form" action="/cards/new_category" method="POST">
                            <div class="form-group">
                                <label for="category-input"><i class="fas fa-plus-circle"></i> 添加分类</label>
                                <div class="input-group">
                                    <input class="form-control" placeholder="输入分类名称" name="name" id="category-input" type="text">
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> 添加</button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="/js/core.js"></script>
</body>
</html>
